<template>
    <div class="login">
        <!-- 登录页 -->
        <router-link to="/my">
            <div class="close"><van-icon color="#a9a9a9" name="close" /></div>
        </router-link>
        <h3>登录</h3>
        <van-form @submit="onSubmit">
            <van-field v-model="username" name="userName" placeholder="输入手机号" />
            <van-field v-model="captcha" name="userCaptcha" placeholder="输入验证码" />
            <div class="captcha">
                <p v-if="time == 0" @click="getTime">| 获取验证码</p>
                <p v-else>{{ time }} 后重新发送</p>
            </div>
            <div class="message">
                <router-link class="link" to="/register">还没账号，立即注册?</router-link>
            </div>
            <div style="margin: 16px; text-align: -webkit-center;">
                <van-button @click="onSubmit" :class="btn_color == true ? `active` : ''" round block type="info"
                    native-type="submit">登录</van-button>
            </div>
        </van-form>

        <div class="other-login">
            <div class="box">
                <p>第三方登录</p>
                <i class="hr"></i>
                <div class="icon-box">
                    <div @click="getLogin" class="qq">
                        <i class="icon icon-qq"></i>
                        <p>QQ</p>
                    </div>
                    <div @click="getLogin" class="weChat">
                        <i class="icon icon-weChat"></i>
                        <p>微信</p>
                    </div>
                </div>
            </div>
        </div>

        <footer>
            <van-checkbox shape="square" checked-color="#fe430d" v-model="checked" icon-size="13px"></van-checkbox>
            同意
            <a href="#">菜谱大全《用户协议》、</a>
            <a href="#">《隐私政策》</a>
        </footer>
    </div>
</template>

<script>
// 导入组件
import { Toast, Dialog } from 'vant'
// 初始化（获取存储在本地的所有用户信息）
let sky_users = []
let sky_users_str = localStorage.getItem("SKY_USERS")
if (sky_users_str) {
    // 如果本地有存储用户信息，就把这个存储信息的字符串转成数组
    sky_users = JSON.parse(sky_users_str)
}

export default {
    data() {
        return {
            btn_color: false,
            checked: false,
            time: 0,
            username: '',
            captcha: '',
        };
    },
    methods: {
        onSubmit(values) {
            // console.log('submit', values);
            // 判断用户是否阅读平台协议
            if (!this.checked) {
                Toast('请阅读协议和政策');
                this.color = false;
                return false;
            }
            // 解构赋值
            let { userName, userCaptcha } = values
            // 判断输入框是否为空
            if (userName == "" || userCaptcha == "") {
                // 弹窗提示
                // Toast.fail('输入框不能为空');
                Toast('输入框不能为空~')
                this.color = false;
                return false;
            }

            // 匹配账号和验证码
            let arr = sky_users.filter(item => {
                return item.username == userName && item.captcha == userCaptcha
            })

            // console.log(arr);
            // 根据arr数组长度判断用户是否登录成功
            if (arr.length == 1) {
                // 把用户ID作为token
                let id = arr[0].id;
                localStorage.setItem("AUTO_TOKEN", id);

                // 给用户反馈“登录结果”
                Dialog.alert({
                    message: '登录成功!',
                }).then(() => {
                    // on close
                    // 跳转登录页
                    this.color = false;
                    this.$router.push({ path: '/my' });
                });
                return;
            }
            else {
                let arr2 = sky_users.filter(item => item.username == userName);
                if (arr2.length == 0) {
                    Toast.fail('该账号不存在');
                }
                else {
                    Toast.fail('账号或者验证码错误');
                }
            }
        },
        getTime() {
            let time = 60; // 初始时间设为3
            this.time = time; // 设置初始值

            const intervalId = setInterval(() => {
                time--; // 每秒减少1
                this.time = time; // 更新计时显示

                if (time <= 0) {
                    clearInterval(intervalId); // 停止计时器
                    this.time = 0; // 为确保显示为0
                }
            }, 1000);
        },

        getLogin() {
            Dialog.confirm({
                title: '温馨提醒',
                message: '未注册账号登录后自动生成账号，请您认真阅读菜谱大全《用户协议》《隐私政策》的全部条款，接受后可开始使用我们的服务',
            })
                .then(() => {
                    // on confirm
                })
                .catch(() => {
                    // on cancel
                });
        }
    },
};
</script>

<style lang="less" scoped>
@import url(../common/less/varible.less);

.login {
    // font-family: @myfont;
    width: 100%;
    padding: 30px 30px;
    height: 660px;
    position: relative;

    .close {
        text-align: right;
        margin-bottom: 10px;
    }

    h3 {
        padding: 20px 0;
        font-size: 20px;
        font-weight: normal;
        font-family: Arial, Helvetica, sans-serif;
    }

    .van-form {
        position: relative;

        .van-field {
            padding-left: 0;
            padding-right: 0;
            padding-bottom: 2px;
            margin: 15px 0;
            border-bottom: 1px solid #ccc;
        }

        .captcha {
            position: absolute;
            top: 60px;
            right: 0;
            font-size: 14px;
            color: #b7b6b6;
        }
    }

    .message {
        margin-top: 15px;
        margin-bottom: 25px;
        font-size: 12px;

        a {
            color: #939393;
        }
    }

    .other-login {
        width: 100%;
        font-size: 12px;
        text-align: center;
        color: #b7b6b6;
        transform: translateY(80px);

        .box {
            width: 200px;
            margin: 0 auto;

            p {
                margin-bottom: 8px;
            }

            .hr {
                width: 150px;
                display: block;
                border: 1px solid #e6e6e6;
                margin: 0 auto;
            }

            .icon-box {
                width: 100%;
                height: 65px;
                margin: 10px auto;
                display: flex;
                justify-content: space-between;
                align-items: flex-end;

                .icon-qq {
                    background-image: url(../assets/img/QQ.png);
                }

                .icon-weChat {
                    background-image: url(../assets/img/weChat.png);
                }
            }
        }
    }

    footer {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
        margin-top: 20px;
        font-size: 13px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: normal;
        text-align: center;
        color: #666;
        line-height: 175%;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);

        a {
            color: @bgColor;
        }

        .van-checkbox {
            vertical-align: middle;
            padding-bottom: 2px;
            display: inline-block !important;
        }
    }

}

.icon {
    display: block;
    width: 30px;
    height: 30px;
    background-size: cover;
    margin-bottom: 5px;
}

.van-button--info {
    width: 200px;
    height: 35px;
    background-color: #939393;
    border: 1px solid #939393;
}

.active {
    background-color: @bgColor;
}
</style>